body,html{
	padding :0;
	margin: 0;
}
.section{
	width: 100%;
	height: 100%;
}
#page_one{
	background: url(http://119.29.169.59/webapp/duo_phone/images/section1_0.jpeg)no-repeat;
	background-size:cover;
}
#page_two{
	background: url(http://119.29.169.59/webapp/duo_phone/images/section2_0.jpg)no-repeat;
	background-size:cover;
}
#page_three{
	background-size:cover;
}
#page_four{
	background-color: rgba(233,233,233,0.6);
	background-size:cover;
}
.foot{
	width: 100%;
	height:30px;
	position: absolute;
	display:block;
	bottom: 5px;
	text-align: center;
	line-height: 30px;
	vertical-align: middle;
}
@keyframes myFootAnimation{
	from{width:10px;}
	to{width:22px;}
}
.foot img{
	display: block;
	margin: 0 auto;
	width:22px;
	height:14px;
	animation:myFootAnimation 1s;
	animation-iteration-count:infinite;
	animation-direction: alternate;
	-o-animation:myFootAnimation 1s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction: alternate;
	-webkit-animation:myFootAnimation 1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction: alternate;
	-moz-animation:myFootAnimation 1s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction: alternate;
}	
/*第一屏*/
#p_div{
	width: 100%;
	height:100px;
	position: absolute;
	top:50px;
	font-size:18px;
}
@keyframes myFirstPAnimation{
	from{left: -30px;opacity:0;}
	to{left:15%;opacity:1;}
}
@keyframes myFirstPAnimation_2{
	from{left: 120%;opacity:0;}
	to{left:45%;opacity:1;}
}
@keyframes myFirstPAnimation_3{
	from{left: 120%;opacity:0;}
	to{left:53%;opacity:1;}
}
.p1{
	position: relative;
	left: 15%;
	animation:myFirstPAnimation 2s;
	-o-animation:myFirstPAnimation 2s;
	-webkit-animation:myFirstPAnimation 2s;
	-moz-animation:myFirstPAnimation 2s;
}
.p2{
	position: relative;
	left: 45%;
	animation:myFirstPAnimation_2 2s;
	-o-animation:myFirstPAnimation_2 2s;
	-webkit-animation:myFirstPAnimation_2 2s;
	-moz-animation:myFirstPAnimation_2 2s;
}
.p3{
	position: relative;
	left: 53%;
	animation:myFirstPAnimation_3 2s;
	-o-animation:myFirstPAnimation_3 2s;
	-webkit-animation:myFirstPAnimation_3 2s;
	-moz-animation:myFirstPAnimation_3 2s;
}

#img_div{
 	width: 100%;
 	height: 300px;
 	float: left;
}
.container p{
	animation:myFirstPAnimation_4 5s;
	-o-animation:myFirstPAnimation_4 5s;
	-webkit-animation:myFirstPAnimation_4 5s;
	-moz-animation:myFirstPAnimation_4 5s;
	font-size: 18px;
}
.container{
	width: 80%;
	margin: 0 auto;
	text-align: center;
}


@keyframes myFirstImgAnimation{
	from{width:0px;opacity:0;}
	to{width:120px;opacity:1;}
}

@keyframes myFirstPAnimation_4{
	from{opacity:0;}
	to{opacity:1;}
}
#img_div img{
	display: block;
	margin: 0 auto;
	width: 130px;
	margin-top: 40px;
	animation:myFirstImgAnimation 2s;
}
#page_one p{
	color: white;
}



/*第二屏*/
.two_main{
	width:100%;
}
#two_img{
	margin: 0 auto;
}
#two_word{
	width: 80%;
	height:120px;
	margin: 0 auto;
	background: black;
	opacity: 0.8;
	color: gray;
	font-size: 2.6em;
	text-align: center;
	line-height:40px;
	border-radius:25px;
	padding-top: 8px;
	padding-bottom:8px;
	margin-top:40px;
}
#p2{
	position: relative;
	right: -650px;
}
#p1{
	position: relative;
	left: -500px;
}
@keyframes p1_animation{
	from{width:0px;}
	to{width:100px;}
}
#two_word #p1{
	animation:p1 6s;
}
#two_word #p2{

}
/*第三屏*/
#three_main{
	width: 90%;
	margin:0 auto;
}
@keyframes myThreeAnimation{
	from{height:150px;}
	to{height:159px;}
}
@keyframes tip{
	from{width: 0px;height: 0px;}
	to{width: 100px;height: 117px;}
}
#tip{
	display: block;
	width:100px;
	height: 117px;
	margin: 0 auto;
	animation:tip 2s;
	-webkit-animation: tip 2s;
	-o-animation: tip 2s;
	animation: tip 2s;
}
#three_main_img{
	display: block;
	margin: 0 auto;
	width: 250px;
	animation:myThreeAnimation 1s;
	animation-iteration-count:infinite;
	animation-direction: alternate;
}
.shuom{
	display: block;
	width:150px;
	height: 50px;
	margin: 0 auto;
	font-size:20px;
	text-align: center;
}
/*第四屏*/
.intro{
	margin: 0 auto;
	width: auto;
	height: auto;
}
.intro_li{
	display: block;
	width:40%;
	height:100px;
	margin:8px;
	padding:12px 5px;
	float: left;
	font-size:17px;
	text-align: center;
	border-radius: 15px;
	opacity: 0;
}
.intro_li h1{
	font-size: 0.7em;
	line-height: 20px;
}
#intro_li_0{
	background-color: rgb(255,243,237);
}
#intro_li_1{
	background-color: rgb(242,248,253);;
}
#intro_li_2{
	background-color: rgb(253,242,245);
}
#intro_li_3{
	background-color: rgb(242,248,253);;
}
#intro_li_4{
	background-color: rgb(253,249,241);
}
#intro_li_5{
	background-color:rgb(248,251,240);
}
#page_four h2{
	width: auto;
	height:25px;
	line-height:25px;
	font-size:18px;
	text-align: center;
}
/*第五屏*/
#page_five img{
	display: block;
	margin: 0 auto;
	position: relative;
	width:65%;
}
.img_0{
	left: -500px;
	opacity: 0;
}
.img_1{
	left: -500px;
	opacity: 0;
}
.img_2{
	right: -500px;
	opacity: 0;
}
#page_five p{
	color: black;
	font-size:18px;
	font-weight:500;
	text-align: center;
	opacity: 0;
}
#page_five h1{
	display: block;
	width: 90%;
	height:40px;
	line-height:40px;
	font-size:18px;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	text-align: center;
	margin: 0 auto;
	margin-bottom:20px; 
	opacity: 0;
}

/*第六屏*/
#page_six img{
	display: block;
	margin: 0 auto;
}
/*第七屏*/
#page_7 img{
	display: block;
	width: 100%;
	position: absolute;
	top: 0px;
	margin-bottom:15px;
}
#page_7_word{
	width: 100%;
	height:auto;
	line-height:60px;
	z-index: 2;
	font-size:20px;
	background: black;
	opacity: 0.5;
	color: white;
	text-align: center;
	position: absolute;
	top: 8%;
}
#page_7_one{
	width: 100%;
	z-index: 2;
	padding-left: 30px;
	padding-top: 10px;
	line-height:20px;
	z-index: 3;
	position: absolute;
	bottom:10px;
}
#page_7_one h1{
	font-size:17px;
	font-weight: bold;
}
#page_7_one p{
	font-size:15px;
}